<template>
  <nav class="top" :style="{ position: fixed ? 'fixed' : 'static' }">
    <div v-for="(item, index) in show" @click="actions(item)" class="noDrag"
      :class="active && item === 1 ? 'active' : null" :name="('action_' + item)">
    </div>
  </nav>
</template>
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
  props: {
    fixed: {
      type: Boolean,
      default: () => false
    },
    show: {
      type: Array,
      default: () => [0, 1, 2]
    },
    custom: {
      type: Boolean,
      default: () => false
    }
  },
  setup (props, { emit }) {
    const active = ref(false)
    const actions = (index) => {
      active.active = index
      if (props.custom) return emit('select', index)
      const actions = {
        0: () => {
          window.electronAPI.setMinimize()
        },
        1: async () => {
          const state = await window.electronAPI.setMaximize()
          active.value = !state
          window.electronAPI.setMaximize(!state)
        },
        2: () => {
          window.electronAPI.hide()
        }
      }
      Reflect.get(actions, index)()
    }
    return {
      actions,
      active
    }
  }
})
</script>

<style scoped lang="less">
.top {
  display: flex;
  justify-content: center;
  align-items: center;
  top: 14px;
  right: 12px;
  z-index: 1;

  >div {
    margin-left: 2px;
    width: 32px;
    height: 32px;
    cursor: pointer;

    &[name="action_0"] {
      background-image: url('~@/assets/nav/size.png');

      &:hover {
        background-image: url('~@/assets/nav/size_s.png');
      }
    }

    &[name="action_1"] {
      background-image: url('~@/assets/nav/block.png');

      &.active {
        background-image: url('~@/assets/nav/block_active.png') !important;
        background-size: 60%;
        background-position: center;
        background-repeat: no-repeat;
      }

      &:hover {
        background-image: url('~@/assets/nav/block_s.png');
      }
    }

    &[name='action_2'] {
      background-image: url('~@/assets/nav/close.png');

      &:hover {
        background-image: url('~@/assets/nav/close_s.png');
      }
    }
  }
}
</style>
